<template>
	<view class="content-class">
		<image style="width: 240px;height: 412px;" :src="pageConfig.hand =='left'?currentItem.hand:currentItem.Rhand"></image>
		<view class="content-right">
			<span @click="currentItem = i" :class="currentItem.id == i.id ? 'active':''" v-for=" i in list" :key="i.id">{{i.name}}</span>
		</view>
		<view class="bottom-btn">
			<view class="sport-btn" @click="confrim">确认</view>
			<view class="sport-btn cancel" @click="confrim('cancel')">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentItem: {},
				list: [{
					name: '小指',
					id: 1,
					hand: require("../../../static/images/hand/1.png"),
					Rhand: require("../../../static/images/hand/r-1.png"),
				}, {
					name: '无名指',
					hand: require("../../../static/images/hand/2.png"),
					Rhand: require("../../../static/images/hand/r-2.png"),
					id: 2
				}, {
					name: '中指',
					hand: require("../../../static/images/hand/3.png"),
					Rhand: require("../../../static/images/hand/r-3.png"),
					id: 3
				}, {
					name: '食指',
					hand: require("../../../static/images/hand/4.png"),
					Rhand: require("../../../static/images/hand/r-4.png"),
					id: 4
				}, {
					name: '拇指',
					hand: require("../../../static/images/hand/5.png"),
					Rhand: require("../../../static/images/hand/r-5.png"),
					id: 5
				}],
			};
		},
		props: ['pageConfig'],
		mounted() {
			this.currentItem = this.list[0]
		},
		methods: {
			confrim(type) {
				if (type == 'cancel') {
					uni.navigateBack({
						delta: 1
					})
					return
				}
				uni.redirectTo({
					url: `/pages/TCMInquiry/TCMInquiry?selectedFinger=${this.pageConfig.hand},${this.currentItem.id}`
				})
			}
		},
	};
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.content-class {
		display: flex;
		flex-direction: row;
		padding: 35px 15px;
		height: 100%;
		justify-content: space-between;

		.cancel {
			background: transparent !important;
			color: #FFD8BB !important;
			border: 1px solid #FFD8BB;
		}

		.content-right {
			display: flex;
			flex-direction: column;
			gap: 13px;

			span {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 72px;
				height: 72px;
				border-radius: 6px;
				border: 1px solid #FFD8BB;
			}

			.active {
				background: #FFD8BB;
				color: #0B0F12;
				font-weight: bold;
			}
		}


	}
</style>